<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html" charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <title>Document</title>
  <link rel="stylesheet" href="../style/15.css">
</head>
<body>
  <div class="container" id="app" :style="'background-color:'+active_color+' ;'">
    <div class="banner" :style="'background-image: url('+ active_image+');'">
    </div>
    <div class="title-box">
      <!-- 
        mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是 mouseout
        mouseenter:当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡。对应的移除事件是 mouseleave
      -->
      <div 
      :class="['title',index==active_index?'active':'']" 
      v-for="(item,index) in list" 
      @mouseenter="changeBanner(index)"
      >
        {{item.title}}
        <span>{{item.sub_title}}</span>
      </div>
    </div>
  </div>


<script src="../js/vue.min.js"></script>
<script src="../js/15.js"></script>
</body>
</html>
